<script setup lang="ts">
import { reactive } from "vue";
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { Store, Nav, Service } from "@/main";
import { onMounted } from "vue";
import UserInfo, { EmptyUserInfo } from "../../entity/interface/user.interface";
import { UserType } from "../../entity/enum/userType.enum";
import { ErrorRequest } from "@/service/abstract.service";
import { requestHandler } from "@/entity/helper/requset.helper";
import { showAlert } from "@/entity/helper/tips.helper";

onMounted(() => {
  // login();
});

const formState = reactive({
  phone: "admin",
  pwd: "123456",
});
const registerData = reactive({
  name: "zhaoyanfa",
  password: "Test123456789",
  phone: "13811111111",
  role: "admin",
});
const register = () => {
  const registerHandler = (res: any) => {
    console.log("外部", res);
  };
  Service.User.register(registerData).then(registerHandler);
};
const login = () => {
  showAlert("正在登录", "LOADING");
  const loginHandler = (res: any) => {
    if (res.hasOwnProperty("ErrorStatus")) {
      showAlert("请求错误", "ERROR");
      console.log("请求错误", res);
    } else {
      console.log("请求成功", res);
      showAlert("请求成功", "SUCCESS");
      Store.Common.setRequestHeader("token", res);
      Nav.replacePage("Admin");
      Store.User.userLogin(EmptyUserInfo({ isLogin: true, userType: 3 }));
    }
  };
  Service.User.login(formState).then(loginHandler);
};
const getUserInfo = () => {
  showAlert("正在获取用户信息", "LOADING");
  const userInfoHandler = (res: UserInfo) => {
    showAlert("获取用户信息成功", "SUCCESS");
    Store.User.userLogin(EmptyUserInfo(res));
    Nav.replacePage("Admin");
  };
  Service.User.userInfo().then(userInfoHandler);
};
</script>

<template>
  <div class="bg">
    <div class="box">
      <a-input v-model:value="formState.phone" placeholder="Username">
        <template #prefix>
          <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
        </template>
      </a-input>
      <a-input type="password" v-model:value="formState.pwd" placeholder="Password">
        <template #prefix>
          <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
        </template>
      </a-input>
      <a-button @click="login()" block type="primary" :disabled="formState.phone === '' || formState.pwd === ''"> LOG IN </a-button>
      <a-button @click="register()" block type="primary" :disabled="formState.phone === '' || formState.pwd === ''"> REGISTER </a-button>
    </div>
  </div>
</template>

<style scoped>
.bg {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 20vw;
  height: 10vw;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
}
</style>
